<!DOCTYPE html>
<html>
<head>
  <title>登录 - 订单管理系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --accent-color: #4cc9f0;
    }
    
    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    /* 添加一个半透明遮罩层，以确保登录表单清晰可见 */
    body::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      z-index: -1;
    }
    
    .login-card {
      width: 100%;
      max-width: 500px; /* 增加宽度 */
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
      background: rgba(255, 255, 255, 0.95);
      overflow: hidden;
      border: none;
    }
    
    .login-header {
      background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding: 30px;
      text-align: center;
    }
    
    .login-header h3 {
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .login-header p {
      opacity: 0.9;
      font-size: 1.1rem;
    }
    
    .login-body {
      padding: 30px;
    }
    
    .form-group {
      margin-bottom: 25px;
      position: relative;
    }
    
    .form-group label {
      font-weight: 500;
      color: #555;
      margin-bottom: 8px;
      font-size: 0.95rem;
    }
    
    .input-group {
      position: relative;
    }
    
    .input-group-text {
      background: #f8f9fa;
      border: 1px solid #dee2e6;
      border-right: none;
      border-radius: 8px 0 0 8px;
      color: #6c757d;
      min-width: 45px;
      text-align: center;
    }
    
    .form-control {
      height: 48px;
      border: 1px solid #dee2e6;
      border-left: none;
      border-radius: 0 8px 8px 0;
      padding-left: 15px;
      font-size: 1rem;
      transition: all 0.3s;
    }
    
    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.15);
      outline: none;
    }
    
    .btn-login {
      background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
      border: none;
      color: white;
      padding: 12px;
      font-weight: 600;
      font-size: 1.1rem;
      border-radius: 8px;
      transition: all 0.3s;
      height: 48px;
      box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }
    
    .btn-login:hover {
      background: linear-gradient(120deg, var(--secondary-color), var(--primary-color));
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
    }
    
    .btn-login:active {
      transform: translateY(0);
    }
    
    .system-info {
      background-color: #e7f3ff;
      border-left: 4px solid #4361ee;
      padding: 15px;
      margin-top: 20px;
      border-radius: 0 4px 4px 0;
    }
    
    /* 跳转选择模态框样式 */
    .redirect-option {
      cursor: pointer;
      transition: all 0.2s;
      border-radius: 10px;
      overflow: hidden;
    }
    
    .redirect-option:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
    
    .alert {
      border-radius: 8px;
    }
    
    .footer-text {
      text-align: center;
      margin-top: 20px;
      color: #6c757d;
      font-size: 0.9rem;
    }
  </style>
</head>
<!-- 添加data属性来传递会话标记 -->
<body class="p-4" data-show-redirect-modal="{{ show_redirect_modal|default(false)|tojson }}" 
      {% if bing_image_url %}style="background-image: url('{{ bing_image_url }}');"{% endif %}>
  <div class="login-card">
    <div class="login-header">
      <h3><i class="fas fa-lock me-2"></i>登录</h3>
      <p>订单管理系统</p>
    </div>
    <div class="login-body">
      {% if error %}
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
          <i class="fas fa-exclamation-circle me-2"></i>{{ error }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      {% endif %}
      
      <form method="POST" id="loginForm">
        <!-- 添加隐藏的next字段 -->
        {% if next %}
        <input type="hidden" name="next" value="{{ next }}">
        {% endif %}
        <div class="form-group">
          <label for="username" class="form-label">用户名</label>
          <div class="input-group">
            <span class="input-group-text">
              <i class="fas fa-user"></i>
            </span>
            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required autofocus>
          </div>
        </div>
        
        <div class="form-group">
          <label for="password" class="form-label">密码</label>
          <div class="input-group">
            <span class="input-group-text">
              <i class="fas fa-lock"></i>
            </span>
            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
          </div>
        </div>
        
        <div class="d-grid mt-4">
          <button type="submit" class="btn btn-login">
            <i class="fas fa-sign-in-alt me-2"></i>登录系统
          </button>
        </div>
      </form>
      
      <div class="footer-text">
        <p class="mb-0">© 2025 订单管理系统</p>
      </div>
    </div>
  </div>

  <!-- 登录成功后的跳转选择模态框 -->
  <div class="modal fade" id="redirectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="fas fa-check-circle text-success me-2"></i>登录成功！</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="text-center mb-4">请选择要跳转的页面：</p>
          <div class="row">
            <div class="col-md-4 mb-3">
              <div class="card redirect-option text-center p-3" onclick="redirectTo('/orders')">
                <div class="card-body">
                  <h5 class="card-title"><i class="fas fa-list-alt fa-2x text-primary"></i></h5>
                  <p class="card-text mt-2">订单列表</p>
                </div>
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <div class="card redirect-option text-center p-3" onclick="redirectTo('/customers')">
                <div class="card-body">
                  <h5 class="card-title"><i class="fas fa-users fa-2x text-info"></i></h5>
                  <p class="card-text mt-2">客户列表</p>
                </div>
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <div class="card redirect-option text-center p-3" onclick="redirectTo('/')">
                <div class="card-body">
                  <h5 class="card-title"><i class="fas fa-home fa-2x text-success"></i></h5>
                  <p class="card-text mt-2">系统首页</p>
                </div>
              </div>
            </div>
          </div>
          <div class="text-center mt-3">
            <button class="btn btn-secondary" onclick="redirectTo('/')">
              <i class="fas fa-arrow-right me-2"></i>跳转到系统首页
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // 检查是否需要显示跳转模态框
    function checkRedirectModal() {
      // 检查URL参数
      const urlParams = new URLSearchParams(window.location.search);
      const showModal = urlParams.get('show_redirect_modal');
      
      // 从data属性获取会话标记
      const showRedirectModal = document.body.getAttribute('data-show-redirect-modal') === 'true';
      
      // 如果URL参数指示显示模态框，或者有会话标记
      if (showModal === 'True' || showModal === 'true' || showRedirectModal) {
        // 显示模态框
        const redirectModal = new bootstrap.Modal(document.getElementById('redirectModal'));
        redirectModal.show();
      }
    }
    
    // 跳转到指定页面
    function redirectTo(url) {
      window.location.href = url;
    }
    
    // 页面加载完成后检查是否需要显示模态框
    document.addEventListener('DOMContentLoaded', function() {
      checkRedirectModal();
    });
    
    // 处理表单提交
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      const formData = new FormData(this);
      
      fetch('/login', {
        method: 'POST',
        body: formData,
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      })
      .then(response => {
        if (!response.ok) {
          return response.json().then(data => {
            throw new Error(data.message || '登录失败');
          });
        }
        return response.json();
      })
      .then(data => {
        if (data.success) {
          // 显示跳转模态框
          const redirectModal = new bootstrap.Modal(document.getElementById('redirectModal'));
          redirectModal.show();
        } else {
          // 显示错误信息
          alert(data.message || '登录失败');
        }
      })
      .catch(error => {
        console.error('Error:', error);
        alert(error.message || '登录过程中发生错误');
      });
    });
  </script>
</body>
</html>